import "./style.scss";
import addPng from "@assets/statement/add.png";
import Button from "@ui/RJMart/button";
import Icon from "@ui/RJMart/icons";
import REST from "@module/Rest";
import { Select, Option } from "@ui/RJMart/select";
import Input from "@ui/RJMart/input";
import Form from "@ui/RJMart/form";
import message from "@ui/RJMart/message";

class Card extends React.Component {
    constructor() {
        super();
        this.state = {
            isShowModal: false,
            projectList: null
        };
        this.orgId = Uts.getCookie("orgId"); //医院、学校的唯一ID
    }

    //open address modal
    addCard = () => {
        let url = `/store/api/fundCard/getProjects`;
        REST.post(url, { deptId: this.props.deptId }).then(
            data => {
                if ((data.message = "success")) {
                    this.setState({ projectList: data.projects }, () => {
                        this.modalCb(true);
                    });
                }
            },
            error => {}
        );
    };

    // close address modal cb
    modalCb = (isShow, type) => {
        this.setState({
            isShowModal: isShow
        });
        if (type == "add") {
            this.props.updateData(this.props.deptId);
        }
    };

    renderCard(select, isShowAdd, data) {
        if (isShowAdd) {
            let addTxtObj = {
                "9": "添加项目",
                "23": "添加经费本"
            };
            return (
                <div
                    onClick={this.addCard}
                    className="rj_card_item-wp rj_card-border"
                >
                    <div className="rj-l-add-wp">
                        <img src={addPng} alt="" />
                        <p>{addTxtObj[this.orgId] || "添加经费卡"}</p>
                    </div>
                </div>
            );
        } else {
            return (
                <div
                    onClick={this.props.onClick.bind(this)}
                    className={Uts.sc(['rj_card_item-wp',select ? "rj_card-select-on" : "rj_card-select-off",this.props.counts>=7?'zen_m-r-18':'zen_m-r-19'])}
                >
                    <div className="rj_card-content">
                        <div className="rj_card_item-top">
                            {/* <span className="rj_l-person-name">
                                {data.managerJobNum}
                            </span> */}
                            {data.fundCardType && (
                                <span className="rj_l-card-type">
                                    {Filter.autoMatch(data.fundCardType, {
                                        "1": "拨入经费",
                                        "2": "配套经费",
                                        "3": "课题经费"
                                    })}
                                </span>
                            )}
                        </div>
                        <div className="rj_card-phone">{data.cardNo}</div>
                        <div className="rj_card_project-name">
                            <span className="rj_project-tittle">项目名称</span>
                            <span className="rj_project-name rj_l-els">
                                {data.projectName}
                            </span>
                        </div>
                        <div className="rj_card_project-name">
                            <span className="rj_project-tittle">负责人</span>
                            <span className="rj_project-name">
                                {data.managerName}
                            </span>
                        </div>
                        {/* <div className="rj_card_project-name">
                            <span className="rj_project-tittle">结题日期</span>
                            <span className="rj_project-name">2018-11-30</span>
                        </div> */}
                    </div>
                </div>
            );
        }
    }

    render() {
        const { select, isShowAdd, data } = this.props;
        const { isShowModal, projectList } = this.state;

        return (
            <React.Fragment>
                {this.renderCard(select, isShowAdd, data)}
                {isShowModal && (
                    <AddCardModal
                        isShow={isShowModal}
                        modalCb={this.modalCb}
                        list={projectList}
                    />
                )}
            </React.Fragment>
        );
    }
}

class AddCardModal extends React.Component {
    constructor() {
        super();
        this.state = {
            projectId: "",
            categoryId: "",
            cardNo: "",
            projectIdList: [],
            typeList: [],
            cardNoState: {
                status: "success",
                message: ""
            },
            projectIdState: false
            // categoryIdState: false
        };
    }

    componentDidMount() {}

    handleClick = (e, isShow) => {
        if (e.target && e.target.className !== "rj_l-modal-bg") {
            return;
        }
        isShow = false;
        this.props.modalCb(isShow);
    };

    closeModal = () => {
        this.props.modalCb(false);
    };

    checkData(data) {
        if (!data.projectId) {
            this.setState({
                projectIdState: true
            });
            return false;
        } else {
            this.setState({
                projectIdState: false
            });
        }
        // if (!data.categoryId) {
        //     this.setState({
        //         categoryIdState: true
        //     });
        //     return false;
        // } else {
        //     this.setState({
        //         categoryIdState: false
        //     });
        // }

        if (!data.cardNo) {
            this.setState({
                cardNoState: {
                    status: "error",
                    message: "请输入经费卡号"
                }
            });
            return false;
        } else {
            this.setState({
                cardNoState: {
                    status: "success",
                    message: ""
                }
            });
        }
        return true;
    }

    //新增经费卡
    addFundCard = () => {
        let url = `/store/api/fundCard/addFundCard`;
        let { projectId, cardNo, categoryId } = this.state;
        let _params = {
            projectId,
            categoryId,
            cardNo,
            group: ""
        };
        if (this.checkData(_params)) {
            REST.post(url, _params).then(
                data => {
                    if ((data.message == "success")) {
                        this.props.modalCb(false, "add");
                    }
                    if(data.code=='0002') {
                        this.props.modalCb(false);
                        message.warn({ text: data.message || "", duration:3000 });
                    }
                },
                error => {}
            );
        }
    };

    //回调
    handleChange(type, event) {
        let value = type === "cardNo" ? event.target.value : event[0];
        this.setState({
            [type]: value
        });
    }

    render() {
        const { projectIdState, categoryIdState, cardNoState } = this.state;
        const { projectIdList, typeList, isShow, list } = this.props;
        const cardTypeList = [
            {
                key: "拨入",
                value: "1"
            },
            {
                key: "配套",
                value: "2"
            },
            {
                key: "课题",
                value: "3"
            }
        ];
        return (
            <div className="rj_l-card-ban">
                <div
                    className="rj_l-modal-bg"
                    onClick={(e, isShow) => this.handleClick(e, isShow)}
                />
                <div className="rj_l-card-modal-wp">
                    <div className="rj_modal-tittle">
                        <span className="zen_fs-16">添加经费卡</span>
                        <span className="rj_l-close" onClick={this.closeModal}>
                            <Icon
                                type="close"
                                width={17.52}
                                height={17.52}
                                verticalAlign="top"
                                color="#969696"
                            />
                        </span>
                    </div>

                    <div className="rj_chose-sub zen_m-t-325">
                        <span className="rj_chose-sub-title ">项目名称</span>
                        <Select
                            selection={projectIdList}
                            onChange={this.handleChange.bind(this, "projectId")}
                            placeholder="请选择"
                        >
                            {list &&
                                list.map((val, index) => {
                                    return (
                                        <Option
                                            key={val.projectId}
                                            value={val.projectId}
                                        >
                                            {val.projectName}
                                        </Option>
                                    );
                                })}
                        </Select>
                        {projectIdState && (
                            <div className="rj_l-option-tip">请选择项目名</div>
                        )}
                    </div>

                    <div className="rj_chose-sub">
                        <span className="rj_chose-card-type">经费卡类型</span>
                        <Select
                            selection={typeList}
                            onChange={this.handleChange.bind(
                                this,
                                "categoryId"
                            )}
                            placeholder="请选择"
                        >
                            {cardTypeList &&
                                cardTypeList.map((val, index) => {
                                    return (
                                        <Option key={index} value={val.value}>
                                            {val.key}
                                        </Option>
                                    );
                                })}
                        </Select>
                        {/* {categoryIdState && (
                            <div className="rj_l-option-tip">
                                请选择经费卡类型
                            </div>
                        )} */}
                    </div>

                    <Form.Item
                        label="经费卡号"
                        message={cardNoState.message}
                        validateStatus={cardNoState.status}
                    >
                        <Input
                            placeholder="请输入"
                            clearable
                            onChange={this.handleChange.bind(this, "cardNo")}
                            onClearChange={this.handleChange.bind(
                                this,
                                "cardNo"
                            )}
                        />
                    </Form.Item>

                    <div className="rj_l-addcard-btn">
                        <Button onClick={this.addFundCard}>确定</Button>
                        <Button onClick={this.closeModal} sub>
                            返回
                        </Button>
                    </div>
                </div>
            </div>
        );
    }
}

export default Card;
